<template>
  <div class="box">
    <div class="zhu_zhuang_tu_box">
      <v-chart :options="options" autoresize @click="clickChart" />
    </div>

    <span class="unit" v-if="isShowUnit">单位: {{ unit }}</span>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "ZhuZhuangTuX",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    ispreview: Boolean,
    isShowUnit: true
  },
  data() {
    return {
      unit: '',
      vaccinumList: [],
      animalList: [],
      options: {
        title: {
          text: '',
          top: '',
          left: '40px',
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '30px'
          }
        },
        grid: {
          left: "2%",
          right: "10%",
          top: "2%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {},
        // 提示
        tooltip: {
          trigger: "item",
          show: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          data: [],
          name: '',
          splitLine: false,
          axisTick: {
		        alignWithLabel: true, //柱状图中心是否对齐刻度位置
		        show: false //不显示刻度
		      },
          nameTextStyle: {
            color: "#fff",
            nameLocation: "start",
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: "#fff",
              fontSize: 20
            }
          }
        },
        yAxis: {
          type: "category",
          data: [],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 15,
              fontWeight: '500'
            },
            // rotate: -45
          },
        },
        series: [
          {
            data: [],
            type: "bar",
            barGap: "100%",
            barCategoryGap: "200%",
            barWidth: 5,
            color: "#fff",
            // 标签
            label: {
              show: true,
              position: "right",
              distance: 10,
              fontSize: 16,
              color: '#fff',
              fontWeight: 600,
              formatter: function(params) {
                return `{span|${params.value}} `
              },
              rich: {
                span: {
                  color: '#fff',
                  fontSize: '14px',
                  fontWeight: '500',
                  fontFamily: '',
                  letterSpacing: '2px'
                }
              }
            },
            itemStyle: {
              normal: {
                // 渐变色
                // color: new echarts.graphic.LinearGradient(0, 1, 1, 0,
                //   [
                //     {
                //       offset: 0,
                //       color: "rgb(86, 162, 227)" // 0% 处的颜色
                //     },
                //     {
                //       offset: 1,
                //       color: "rgb(86, 162, 227)" // 100% 处的颜色
                //     }
                //   ],
                //   false
                // ),
                shadowColor: "#E4CFBB",
                //模糊细数
                shadowBlur: 4
              }
            },
          }
        ],
      },
    };
  },
  watch: {
    value(val) {
      this.options.xAxis.data = val.y
      this.options.yAxis.data = val.x
      this.options.series[0].data = val.y
      // this.options.series[0].color = val.color
      // this.options.yAxis.name = val.yName
      this.unit = val.unit
    }
  },
  mounted() {
    
  },
  methods: {
    clickChart(params) {
      if (this.vaccinumList && this.vaccinumList.length) {
        this.openVaccinumDetailPage(params)
      } else {
        this.clickYangYiYuanJob(params)
      }
    },

    // 打开 疫苗详情页
    openVaccinumDetailPage(params) {
      let id = ''
      let obj = {}

      this.vaccinumList.forEach(item => {
        if (params.name.substring(0, params.name.length -2) == item.name) {
          id = item.id
        }
      })

      obj = {
        id,
        name: params.name
      }

      this.$emit('emitChartParams', obj)
    },

    // 点击的 是 防疫员的 防疫工作
    clickYangYiYuanJob(params) {
      this.$emit('emitChartParams', params.name)
    }
  }
};
</script>

<style scoped lang="less">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.zhu_zhuang_tu_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.unit { position: absolute; left: 10px; bottom: 0px; color: #fff; font-size: 12px; }

.s { color:rgb(87, 122, 249)}
</style>
